<template>
  <breadcrumb-navigation></breadcrumb-navigation>
  <div id="select">
    <div id="row">
      <span>
        <span>资产编号：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <span>使用人员：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <span>所属部门：</span>
        <span id="inputBox">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></span>
      </span>
      <span>
        <span>资产类别：</span>
        <span id="inputBox">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></span>
      </span>
      <span>
        <span>选择日期：</span>
        <span id="inputBox"> <el-date-picker v-model="value1" type="date" placeholder="请选择" size="default" /></span>
      </span>
    </div>
    <el-row id="row">
      <span>
        <span>资产名称：</span>
        <span id="inputBox"><el-input v-model="input" placeholder="请输入" clearable /></span>
      </span>
      <span>
        <span>资产状态：</span>
        <span id="inputBox">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></span>
      </span>
      <span>
        <el-button :icon="Search" class="searchBtn">查询</el-button>
        <el-button :icon="RefreshLeft">重置</el-button>
      </span>
    </el-row>
  </div>
  <div id="result">
    <div style="display: flex; align-items: center; font-weight: 600">查询结果列表</div>
    <div>
      <el-button class="searchBtn">新增</el-button>
      <el-button class="searchBtn">打印</el-button>
      <el-button class="searchBtn">导出</el-button>
    </div>
  </div>
  <div id="data">
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="multipleTableRef"
      :header-cell-style="{ background: '#00a468', color: '#ffffff' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column prop="id" label="序号" fixed="left" width="100" align="center" />
      <el-table-column prop="encoding" label="资产编码" width="120" align="center" />
      <el-table-column prop="name" label="资产名称" width="120" align="center" />
      <el-table-column prop="model" label="规格型号" width="120" align="center" />
      <el-table-column prop="sort" label="所属类别" width="120" align="center" />
      <el-table-column prop="unit" label="计量单位" width="120" align="center" />
      <el-table-column prop="unitPrice" label="资产单价" width="120" align="center" />
      <el-table-column prop="RFID" label="是否配置RFID" width="120" align="center" />
      <el-table-column prop="RFIDNum" label="RFID卡号" width="180" align="center" />
      <el-table-column prop="place" label="存放地点" width="120" align="center" />
      <el-table-column prop="purchaseDate" label="购买日期" width="120" align="center" />
      <el-table-column prop="userDepartment" label="使用部门" width="120" align="center" />
      <el-table-column prop="userService" label="使用人员" width="120" align="center" />
      <el-table-column prop="startTime" label="维护开始时间" width="120" align="center" />
      <el-table-column prop="maintenancePeriod" label="维护周期" width="120" align="center" />
      <el-table-column prop="supplier" label="供应商" width="120" align="center" />
      <el-table-column prop="contact" label="联系方式" width="120" align="center" />
      <el-table-column prop="contactWay" label="资产状态" width="120" align="center" />
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default>
          <el-button link size="small" id="dataBtn">查看</el-button>
          <el-button link size="small" id="dataBtn">编辑</el-button>
          <el-button link size="small" id="dataBtn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div id="page">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="12"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import breadcrumbNavigation from './面包屑导航/breadcrumbNavigation.vue'

import { onMounted } from 'vue'
import { warehousingOfAssets, PublicData } from '../../store/wl/PublicData'
import { Search, RefreshLeft } from '@element-plus/icons-vue'
const storage = warehousingOfAssets()
const crumbs = PublicData()

onMounted(() => {
  crumbs.pageName = storage.pageName
})

let tableData = storage.tableData
</script>

<style scoped lang="less">
// 查询
#select {
  background: white;
  font-size: 14px;
  padding: 0px 15px 20px 20px;
  overflow: hidden;
}
#row {
  margin: 20px 0px 0 0;
}
#row > span {
  margin: 0 20px 0 0;
}
#inputBox {
  /deep/.el-input {
    width: 157px;
    height: 30px;
  }
}
.searchBtn {
  background-color: #00a468;
  color: white;
}
// 结果
#result {
  padding: 0 20px 10px 20px;
  background: white;
  display: flex;
  justify-content: space-between;
}
// 表格
#data {
  padding: 15px 0 0 0;
  background-color: white;
}
#dataBtn {
  color: #00a468;
}
//分页
#page {
  display: flex;
  justify-content: flex-end;
  background-color: white;
  padding: 10px 10px;
}
</style>
